<ng-container *ngIf="format === 'rows'">
<div class="row name-row" *ngFor="let topic of records">
<ng-container *ngIf="topic.preferredName as name">
  <div class="col-sm-7">
    <div class="row-title">
      <label>{{typeLabel(topic.type) | translate}}:</label>
      <a [routerLink]="topic.link | localize"
        class="body-link cred-link name">{{name.text}}</a>
    </div>
    <small>
      <label>
        <span translate>cred.issuer</span>:</label>
      <a [routerLink]="['/issuer', name.issuer.id] | localize" class="body-link issuer-link">{{name.issuer.name}}</a>
    </small>
    <br>
    <small>
      <label>
        <span translate>cred.last-updated</span>:</label>
      <span class="claim-info date">{{name.last_updated | dateFormat: 'effectiveDate'}}</span>
    </small>
  </div>
  <div class="col-sm-5">
    <small *ngIf="topic.addresses.length > 0">
      <address-view [record]="topic.addresses[0]"></address-view>
    </small>
  </div>
</ng-container>
</div>
</ng-container>
<div class="topics-grid" *ngIf="format === 'cards'">
  <name-panel [record]="topic" *ngFor="let topic of records" :link="true"></name-panel>
</div>
<ng-container *ngIf="format === 'compact'">
<div class="row name-row" *ngFor="let topic of records">
<ng-container *ngIf="topic.preferredName as name">
  <div class="col-md-6 row-title">
    <a [routerLink]="topic.link | localize" class="body-link cred-link related">{{name.text}}</a>
      ( {{topic.relationLabel | translate}} )
    <div class="topic-info small">
      {{topic.typeLabel | translate}}
      <span class="cred-entity-status" *ngIf="topic.otherEntityStatus as status">:
        <attribute-view [record]="status"></attribute-view>
      </span>
      <span class="cred-entity-type" *ngIf="topic.otherEntityType as type">
        &mdash; <attribute-view [record]="type"></attribute-view>
      </span>
    </div>
  </div>
  <div class="col-md-6">
    <label>
      <span translate>cred.last-updated</span>:</label>
    <span class="claim-info date">{{name.last_updated | dateFormat: 'effectiveDate'}}</span>
  </div>
</ng-container>
</div>
</ng-container>
